@import '../../style/mixin.scss';

* {
  outline: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-box-sizing: border-box
}

.order-tab {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: toRem(88);
  z-index: 10;
  background: #FFF;
  border-bottom: solid 1px #DDD;
  ul {
    width: toRem(304);
    height: toRem(58);
    margin: toRem(15) auto 0;
    border: solid 1px #ff7c33;
    border-radius: 2px;
    li {
      float: left;
      width: 50%;
      height: 100%;
      line-height: toRem(58);
      text-align: center;
      a {
        display: inline-block;
        width: 100%;
        height: 100%;
        font-size: toRem(26);
        color: #ff7c33;
      }
      & {
        a.router-link-active {
          background: #ff7c33;
          color: #FFF;
        }
      }
    }
  }
}
.qrcode{
  display: inline-block;
  width:.8rem;
  height:.8rem;
  background: url("") 0 0 no-repeat;
  background-size:contain ;
}
.qrcode-fl{
  float: left;
}
.qrcode-fr{
  float: right;
  margin-right: .5rem;
  margin-top: .28rem;
}
.myOrder-wrap {
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
.order-list-container {
  padding-top: toRem(105);
}
.pro-cont {
  margin-bottom: .4rem;
  background-color: #fff;
}
.pro-title {
  padding: .3rem .56rem;
  overflow: hidden;
  height: 1.76rem;
  line-height: 1.16rem;
  border-bottom: 1px solid #f0f0f0;
}
.c-tit {
  display: block;
  float: left;
  width: 8rem;
  position: relative;
  padding-left: 1rem;
  margin-right: 20px;
  color: #999;
  font-size: .52rem;
  line-height: 1.16rem;
  background: url(/static/images/logo-54.png) 0 center no-repeat;
  background-size: .72rem;
  color: #444;
}
.c-peo {
  float: right;
  color: #FF7C33;
  font-size: .52rem;
}
.c-peo .c-del {
  display: inline-block;
  float: right;
  width: .56rem;
  height: .56rem;
  margin-left: .4rem;
  margin-top: .28rem;
  background: url() 0 0 no-repeat;
  background-size: contain;
}
.btn-delhis {
  display: inline-block;
  float: right;
  height: 100%;
  width: 1rem;
  margin-left: .2rem;
}
.btn-delhis:before {
  content: " ";
  display: inline-block;
  width: 0.56rem;
  height: 0.56rem;
  margin: .3rem .2rem;
  background: url() 0 0 no-repeat;
  background-size: contain;
}
.pro-detail {
  //border-bottom: 1px solid #f0f0f0;
  padding: .4rem .56rem;
  background: #FAFAFA;
  overflow: hidden;

  .qa-price {
    text-align: left;
    padding: 0;
  }
}
.o-index-pro-pic {
  position: relative;
  float: left;
  width: 2.4rem;
  height: 2.4rem;
  margin-right: .4rem;
  .desc {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: _(40);
      background: #000;
      color: #FFF;
      text-align: center;
      line-height: _(40);
      font-size: _(20);
      opacity: .5;
  }
}
.o-index-pro-pic img {
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid #e5e5e5;
}
.o-pro-info {
  max-height: 1.4rem;
  overflow: hidden;
  position: relative;
  font-size: .52rem;
  line-height: .72rem;
  color: #333;
}
.qa-price {
  margin-top: .16rem;
}
.qa-price {
  text-align: right;
  padding: .32rem .8rem;
}
.qa-price .pay-price {
  margin-left: .4rem;
}
.price-text {
  height: .72rem;
  line-height: .72rem;
  font-size: .6rem;
}
.o-pro-num {
  font-size: .4rem;
  color: #979797;
  margin-left: .3rem;
}
.pay-price {
  float: right;
}
.pro-more {
  padding: 0;
}
.pro-more .o-index-pro-pic {
  float: none;
  width: auto;
  height: auto;
  margin-right: -.4rem;
  padding: .4rem .8rem;
  overflow: hidden;
}
.pro-more .o-index-pro-pic img {
  float: left;
  margin-right: .4rem;
}
.more-icon {
  display: none;
}
.pro-more .o-index-pro-pic .more-icon {
  float: left;
  display: inline-block;
  content: " ";
  width: 1.3rem;
  height: .3rem;
  margin: 1rem 0 0 0.32rem;
  background: url(images/more-icon.png) 0 0 no-repeat;
  background-size: contain;
}
.pro-more .qa-price {
  text-align: right;
  padding: .32rem .8rem;
}
.pro-more .qa-price .pay-price {
  margin-left: .4rem;
}
.qa-btn {
  height: 1.76rem;
  line-height: 1.76rem;
  text-align: right;
  padding: 0 .56rem 0 0;
  margin-left: .56rem;
  border-top: solid 1px #E3E3E3;
}
.qa-btn .btn {
  display: inline-block;
  width: 3.2rem;
  height: 1.2rem;
  margin-left: .4rem;
  line-height: 1.2rem;
  text-align: center;
  border-radius: .08rem;
}
.qa-btn .btn-go-pay {
  background-color: #ff7c33;
  color: #fff;
}
.qa-btn .btn-gray {
  border: 1px solid #cccccc;
  background-color: #fff;
  color: #333;
}
.qa-btn .btn-trail {
  border: solid 1px #FA0;
  color: #FA0;
  background: #FFF;
}
.no-order {
  width: 100%;
  position: absolute;
  top: 50%;
  text-align: center;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.no-icon {
  position: relative;
  background: #d7d7d7;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 100%;
  box-sizing: border-box;
  padding: .4rem;
  margin: auto;
}
.no-icon img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 1.2rem;
  height: 1.6rem;
  margin: auto;
}
.no-icon img.searchIcon {
  width: 1.4rem;
  height: 1.4rem;
}
.no-txt {
  font-size: .6rem;
  color: #999999;
  margin-top: .8rem;
}
.no-txtY {
  display: inline-block;
  font-size: .48rem;
  color: #ffaa00;
  margin-top: .56rem;
}

/* 其他订单 */
.order-others {
  padding-top: toRem(105);
  ul {
    background: #FFF;
    li {
      position: relative;
      height: toRem(88);
      padding: 0 toRem(28);
      line-height: toRem(88);
      font-size: toRem(28);
      border-bottom: solid 1px #E3E3E3;
      a {
        display: block;
        width: 100%;
        height: 100%;
        color: #444;
        padding-left: 1rem;
        background-size: .64rem;
        background-position: 0 center;
        background-repeat: no-repeat;
        &.sn { background-image: url(/static/images/snlogo-48.png);}
        &.card { background-image: url(/static/images/icon-gouwuka.png);}
      }

      &:after {
        content: '';
        position: absolute;
        top: toRem(35);
        right: toRem(28);
        width: toRem(16);
        height: toRem(16);
        border-top: solid 1px #999;
        border-right: solid 1px #999;
        transform: rotate(45deg);
      }
    }
  }
}


.order-list {
  .empty {
    padding-top: toRem(400);
    i {
      display: block;
      width: toRem(180);
      height: toRem(180);
      background: url(images/empty.png);
      background-size: contain;
      margin: 0 auto;
    }
    p {
      margin-top: toRem(40);
      font-size: toRem(30);
      color: #999;
      text-align: center
    }
  }
}


/*订单跟踪*/
.topContent {
    position: relative;
    padding: toRem(30) toRem(40);
    background-color: #FAFAFA;
    overflow: hidden;
}
.topContent .item {
    position: relative;
    color: #999;
    padding-left: toRem(60);
    margin-bottom: toRem(40);
    line-height: toRem(38);
    font-size: toRem(26);
    .dot {
        position: absolute;
        width: toRem(20);
        height: toRem(20);
        background: url(images/progress.png) no-repeat;
        background-size: contain;
        left: toRem(8);
        top: toRem(8);
    }
}
.topContent .item.onState {
    color: #333;
    .dot {
        width: toRem(36);
        height: toRem(36);
        background: url(images/progress_s.png) no-repeat;
        background-size: contain;
        left: 0;
        top: toRem(4);
    }
}

/*****交易完成*****/

.h-fix-btn{
    padding-bottom: 2.4rem;
}

.floor{
    margin-top: toRem(20);
    background-color: #fff;
    font-size: toRem(26)
}

.m-status{
    padding: toRem(20) 0 0 toRem(40);
    font-size:toRem(36);
    color:#ff6600;
    line-height: 1;
    display: inline-block;
}
.m-title{
    padding: toRem(26) toRem(40);
    border-bottom: 1px solid #f0f0f0;
    font-weight: normal;
}
.m-title .order-ico:before {
    content: "";
    display: inline-block;
    width: toRem(24);
    height: toRem(28);
    margin: 0 .12rem 0 0;
    background: url() center no-repeat;
    background-size: 100%;
    vertical-align: -.1rem;
}
.m-title .order-ico.mess-ico:before{
    width: toRem(28);
    background-image: url();
}
.m-title .order-ico.defu-ico:before{
    width: toRem(28);
    height: toRem(28);
    background-image: url();
}
.m-cont{
    padding: toRem(26) toRem(30);
    color: #999;
    .g-time{
        color: #FFA200;
    }
    .g-track{
        position: relative;
        height: toRem(36);
        padding-right: toRem(30);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

.m-cancel{
    .m-status{
        color:#999;

    }
}
.m-finish{
    .m-status{
        color:#7ed321;
        &:before{
            content:" ";
            display: inline-block;
            width: toRem(40);
            height: toRem(40);
            background: url() 0 0 no-repeat;
            -webkit-background-size: contain;
            background-size: contain;
            vertical-align:-.08rem;
        }
    }
}
.m-delivery{
    padding-bottom: .5rem;
    .m-status{
        color:#ff6600;
    }
    .m-cont {
        padding-bottom: 0;
    }
}
.m-pay{
    .m-status{
        color:#ff6600;
    }
}

/*退款申请已提交*/
.o-pro-status {
    border:toRem(4) solid #ff6600;
    border-radius:toRem(4);
    .o-status-mess{
        .m-status{
            font-size: toRem(26);
            color: #333;
            line-height: toRem(36);
        }
        .m-statusTxt{
            padding: toRem(8) toRem(40) toRem(26);
            border-bottom: 1px solid #f0f0f0;
            color: #999;
            .goods-price {
                color: #f60;
            }
        }
    }

    .o-pro-info {
        padding-right: 2.5rem;
    }

    .m-cont{
        border-bottom: 1px solid #f0f0f0;
    }
}
/*商品详情*/
.o-list-con{
    border-bottom: 1px solid #f0f0f0;
    .verify-code {
        float: right;
        line-height: toRem(120);
        color: #999;
    }
    .o-index-pro-pic {
        float: left;
        width: toRem(120);
        height: toRem(120);
        margin-right: toRem(20);
        img {
            width: toRem(120);
            height: toRem(120);
        }
    }
    .o-pro-info {
        width: toRem(350);
        position: relative;
        font-size: toRem(26);
        line-height: toRem(36);
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        .o-pro-tit{
            // display: block;
            // width: toRem(390);
        }
        .o-pro-num{
            position: absolute;
            right: 0;
            top: 0;
            color:#999;
            span{
                color: #FFA100;
            }
        }
    }
    .qa-price {
        width: toRem(200);
        margin-top: toRem(8);
        padding: 0;
        .price-text {
            height: toRem(36);
            line-height: toRem(36);
            font-size: toRem(26);
            .goods-price {
                color: #f60;
            }
            span { float: left;}
            i { float: right;}
        }
    }
    a{
        position: relative;
        overflow: hidden;
        display: block;
    }
    .o-status{
        position: absolute;
        right:0;
        bottom: 0;
        color: #f60;
        span{
            display: inline-block;
            border: 1px solid #f60;
            padding: 0.02rem 0.08rem;
            border-radius: 0.08rem;
            margin-right: _(20)
        }
    }

    &.item-wide {
        .o-pro-info {
            width: auto;
            height: 1.44rem;
            overflow: hidden;
            white-space: normal;
            word-break: break-all;
            &.pr {
                padding-right: 1.2rem;
            }
        }
    }
}

.p-teb-name{
    float: left;
    width: toRem(160);
    text-align: right;
    color: #999;
    line-height: toRem(36);
    &.sfze { margin-top: .16rem;}
}
.p-teb-cont{
    float: left;
    width: toRem(500);
    margin-left: toRem(10);
    color: #333;
}
.p-reds{
    font-size: toRem(36);
    color: #f60;
}
.o-pro-price{
    li{
        padding: toRem(2) 0;
        overflow: hidden;
    }
}
.o-order-mess{
    li{
        overflow: hidden;
        padding: toRem(2) 0;
    }
    .p-teb-cont{
        color: #999;
    }
}

/*底部按钮*/
.btn-bottom{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: toRem(98);
    padding: 0 toRem(28);
    background: #FFF;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    .o-btn{
        text-align: right;
        white-space: nowrap;
        a {
            display: inline-block;
            width: toRem(178);
            height: toRem(58);
            margin: toRem(20) 0 0 toRem(20);
            border: solid 1px #AAA;
            line-height: toRem(58);
            color: #444;
            font-size: toRem(28);
            text-align: center;
            border-radius: toRem(4);
            &.go-pay {
              border-color: #FF7C33;
              background: #FF7C33;
              color: #FFF;
            }
            &.btn-trail {
                border: solid 1px #F60;
                color: #F60;
                background: #FFF;
            }
        }
    }
}

.c-back:after {

    content: " ";
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    border-width: 1px 1px 0 0;
    border-color: #333;
    border-style: solid;
    margin-top: -0.16rem;
    height: 0.32rem;
    width: 0.32rem;
    background-size: contain;
    margin-right: .4rem;
}

/* 新增 */
.trail-empty {
    padding-top: toRem(400);
    i {
        display: block;
        margin: 0 auto;
        width: toRem(160);
        height: toRem(160);
        background: url(/static/images/without.png);
        background-size: contain;
    }
    p {
        margin-top: toRem(20);
        text-align: center;
        color: #666;
        font-size: toRem(28);
    }
}

.delivery-info {
    color: #333;
    span {
        color: #999;
    }
    .delivery-info-content {
        padding: .52rem .8rem;
        line-height: 1.8;
    }
}

.pickup-process-btn {
    float: right;
    width: _(28);
    height: _(28);
    margin-top: _(10);
    background: url(images/question.png) center center no-repeat;
    background-size: contain;
}
.pickup-process {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    background-color: rgba(0, 0, 0, .5);
    z-index: 11;
    .image {
        position: absolute;
        left: 50%;
        top: 50%;
        width: _(560);
        height: _(752);
        margin-left: _(-280);
        margin-top: -8.8rem;
        background: url(images/pickup-process.png) 0 0 no-repeat;
        background-size: contain;
        i {
            position: absolute;
            bottom: _(-130);
            left: _(230);
            width: _(90);
            height: _(90);
            background: url(images/pickup-process-close.png);
            background-size: contain;
        }
        span {
            position: absolute;
            bottom: _(-40);
            left: _(273);
            width: 0;
            height: _(40);
            border-left: dashed 1px #FFF;
        }
    }
}
.alertCode-container{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  background-color: rgba(0, 0, 0, .5);
  z-index: 11;
}
#qrcode{
  width:8rem;
  height:8rem;
  margin:1rem;
  position: relative;
}
#qrcode img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.code-bg{
  position: absolute;
  top:50%;
  left: 50%;
  width:10rem;
  height:10rem;
  margin-left: -5rem;
  margin-top: -5rem;
  background: #fff;
  border-radius: _(15);
}
.code-bg i{
  position: absolute;
  bottom: _(-130);
  left: _(200);
  width: _(90);
  height: _(90);
  background: url(images/pickup-process-close.png);
  background-size: contain;
}
.code-bg span{
   position: absolute;
   bottom: _(-40);
   left: _(245);
   width: 0;
   height: _(40);
   border-left: dashed 1px #FFF;
 }
